<template>
  <div class="person">
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点击加1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, watch } from 'vue';
let sum = ref(0)

function changeSum() {
  sum.value += 1
}

//  watch(监视谁？，回调函数（新值，旧值）)
const stopWatch = watch(sum, (newVlaue, oldValue) => {
  console.log('sum变化了', newVlaue, oldValue)
  if (sum.value > 10) {
    stopWatch()
  }
})
</script>

<style>
.person {
  width: 100%;
  background-color: skyblue;
}
</style>